<template>
  <div class="container">
    <div class="system-box">
      <div class="system-title-container">
        <div class="system-title">企业员工管理系统</div>
        <div class="system-english-title">
          Enterprise Employee Management System
        </div>
      </div>
      <div class="login-container">
        <!-- 登录类型切换 -->
        <div class="login-select">
          <div
            :class="[authStore.opType == '1' ? 'active' : '']"
            @click="authStore.selectLogin('1')"
          >
            员工登录
          </div>
          <div
            :class="[authStore.opType == '0' ? 'active' : '']"
            @click="authStore.selectLogin('0')"
          >
            管理员登录
          </div>
        </div>
         <!-- 动态标题：根据是否注册状态切换 -->
        <div class="login-title">
          {{ isRegisterMode ? "员工注册" : "欢迎登录" }}
        </div>

        <!--<div class="login-title">欢迎登录</div>
        <div class="login-tab">&#x300C;学习是永恒，进步是目标。&#x300D;</div>-->


        <!-- 登录输入框：直接绑定 Pinia 中的响应式数据 -->
        <div class="login-input">
          <el-input
            type="text"
            class="input-name"
            size="large"
            v-model="authStore.userName"
            placeholder="请输入用户名"
          />
          <el-input
            type="password"
            class="input-password"
            v-model="authStore.userPassword"
            placeholder="请输入密码"
          />
          
        </div>
           <!-- 错误提示（共用） -->
        <div v-if="authStore.errorMsg" class="error-message">
          {{ authStore.errorMsg }}
        </div>
         <!-- 按钮区域：登录/注册切换 -->
        <div class="footer">
          <el-button 
            type="primary" 
            class="login-btn" 
            @click="handleSubmit"
          >
            {{ isRegisterMode ? "注册" : "登录" }}
          </el-button>
        </div>

        <!-- 注册/登录切换入口（仅员工登录模式显示） -->
        <div 
          v-if="authStore.opType == '1'" 
          @click="toggleMode"
          class="mode-toggle"
        >
          {{ isRegisterMode ? "已有账号？去登录" : "没有账号？去注册" }}
        </div>
      </div>
    </div>
  </div>
</template>



        

<script setup>
import { useAuthStore } from "@/stores/auth";

import { ref } from "vue";
const authStore = useAuthStore();
const isRegisterMode = ref(false);

// 切换登录/注册模式
const toggleMode = () => {
  isRegisterMode.value = !isRegisterMode.value;
  authStore.errorMsg = ""; // 切换时清空错误信息
};
// 提交表单（根据模式调用登录或注册方法）
const handleSubmit = () => {
  if (isRegisterMode.value) {
    authStore.register(); // 调用注册方法
  } else {
    authStore.login(); // 调用登录方法
  }
};
</script>

<style scoped>
/* 原有样式保持不变，新增以下样式 */
.error-message {
  color: #ff4d4f; /* 错误提示红色 */
  font-size: 12px;
  text-align: center;
  margin: 10px 0;
  height: 20px; /* 防止布局抖动 */
}

.mode-toggle {
  text-align: center;
  margin-top: 15px;
  color: #165dff;
  cursor: pointer;
  font-size: 14px;
}

.mode-toggle:hover {
  text-decoration: underline;
}

/* 登录类型切换的活跃样式（补充） */
.login-select > div {
  padding: 5px 15px;
  cursor: pointer;
}
.login-select .active {
  background: linear-gradient(to right, #165dff, #15d9c5);
  color: white;
  border-radius: 4px;
}
.container {
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #165dff 0%, #15d9c5 100%);
  display: flex;
  justify-content: center;
  align-items: center;

  .system-box {
    height: 570px;
    width: 1000px;
    display: flex;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);

    .system-title-container {
      width: 500px;
      background-color: linear-gradient(135deg, #165dff, #15d9c5 100%);
      background-position: 70% 30%; /* 调整这个值来匹配青色区域 */
      background-size: 200% 200%; /* 放大渐变区域便于定位 */
      display: flex;
      gap: 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 8px 0 0 8px;

      .system-title {
        font-size: 32px;
        letter-spacing: 2px;
      }
      .system-english-title {
        font-size: 14px;

        opacity: 0.8;
      }
    }

    .login-container {
      position: relative;
      width: 500px;
      background-color: #fff;
      padding: 30px;
      border-radius: 0 8px 8px 0;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

      .login-title {
        font-size: 24px;
        color: #000;
        text-align: center;
        margin-top: 60px;
        margin-bottom: 20px;
      }

      .login-select {
        width: 300px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;
      }

      .login-tab {
        font-size: 12px;
        text-align: center;
        margin-bottom: 80px;
      }

      .login-input {
        margin-bottom: 20px;
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;

        .input-password {
          svg {
            size: 1px;
          }
        }
      }
      :deep(.input-name .el-input__wrapper .el-input__inner) {
        width: 300px !important;
        height: 40px !important;
      }
      :deep(.input-password .el-input__wrapper .el-input__inner) {
        width: 300px !important;
        height: 40px !important;
      }
      .footer {
        display: flex;

        justify-content: center;
        .login-btn {
          width: 300px;
          height: 40px;
          border: 1px solid #fff;
          border-radius: 6px;
          color: #fff;
          background: linear-gradient(to right, #165dff, #15d9c5 100%);
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .login-btn:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
